વેબ એપ મેનિફેસ્ટ: પ્રોગ્રેસિવ વેબ એપ કન્ફિગરેશન માટે તમારી માર્ગદર્શિકા

વેબ એપ મેનિફેસ્ટ એ એક JSON ફાઇલ છે જે બ્રાઉઝર્સ અને ઓપરેટિંગ સિસ્ટમ્સને તમારી વેબ એપ્લિકેશન વિશે માહિતી પૂરી પાડે છે. આ માહિતીનો ઉપયોગ ત્યારે થાય છે જ્યારે એપ વપરાશકર્તાના ઉપકરણ પર ઇન્સ્ટોલ કરવામાં આવે છે, જે તેને પ્રોગ્રેસિવ વેબ એપ (PWA) તરીકે કેવી રીતે દેખાય છે અને વર્તે છે તે વ્યાખ્યાયિત કરે છે. તેને એક બ્લુપ્રિન્ટ તરીકે વિચારો જે તમારી વેબસાઇટને ઇન્સ્ટોલ કરી શકાય તેવા, એપ જેવા અનુભવમાં રૂપાંતરિત કરે છે. વપરાશકર્તાની સગાઈ અને શોધક્ષમતા માટે સુવ્યવસ્થિત રીતે કન્ફિગર કરેલ મેનિફેસ્ટ નિર્ણાયક છે.

પ્રોગ્રેસિવ વેબ એપ (PWA) શું છે?

વેબ એપ મેનિફેસ્ટમાં ઊંડા ઉતરતા પહેલા, ચાલો પુનરાવર્તન કરીએ કે PWA શું છે. PWAs એ વેબ એપ્લિકેશનો છે જે વપરાશકર્તાઓને એપ જેવો અનુભવ પ્રદાન કરે છે. તે આ પ્રમાણે છે:

• વિશ્વસનીય: સર્વિસ વર્કર્સને આભારી, તરત જ લોડ થાય છે અને ઑફલાઇન અથવા ઓછી-ગુણવત્તાવાળા નેટવર્ક પર કામ કરે છે.
• ઝડપી: સરળ એનિમેશન અને કોઈ જંકી સ્ક્રોલિંગ વિના વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓ પર ઝડપથી પ્રતિસાદ આપે છે.
• આકર્ષક: પુશ નોટિફિકેશન્સ અને હોમ સ્ક્રીન પર ઇન્સ્ટોલ કરવાની ક્ષમતા જેવી સુવિધાઓ સાથે એક ઇમર્સિવ વપરાશકર્તા અનુભવ પ્રદાન કરે છે.

વેબ એપ મેનિફેસ્ટની ભૂમિકા

વેબ એપ મેનિફેસ્ટ એ PWA નો આધારસ્તંભ છે. તે બ્રાઉઝર્સને નીચે મુજબ જરૂરી માહિતી પૂરી પાડે છે:

• PWA ઇન્સ્ટોલ કરો: તે વપરાશકર્તાઓને તેમના ઉપકરણો પર વેબ એપ ઇન્સ્ટોલ કરવા સક્ષમ બનાવે છે, તેને તેમની હોમ સ્ક્રીન અથવા એપ લોન્ચરમાં ઉમેરે છે.
• PWA યોગ્ય રીતે પ્રદર્શિત કરો: તે એપનું નામ, આઇકોન્સ, થીમ કલર અને અન્ય વિઝ્યુઅલ પાસાઓને વ્યાખ્યાયિત કરે છે.
• PWA ના વર્તનને નિયંત્રિત કરો: તે સ્પષ્ટ કરે છે કે એપ કેવી રીતે લોન્ચ થવી જોઈએ (દા.ત., પૂર્ણ-સ્ક્રીન મોડમાં અથવા સ્ટેન્ડઅલોન વિન્ડો તરીકે) અને તેને ઓપરેટિંગ સિસ્ટમ સાથે કેવી રીતે સંકલિત કરવી જોઈએ.

તમારી `manifest.json` ફાઇલ બનાવવી

વેબ એપ મેનિફેસ્ટ એ એક JSON ફાઇલ છે, જેનું નામ સામાન્ય રીતે `manifest.json` હોય છે. તેને તમારી વેબ એપ્લિકેશનના રૂટ ડિરેક્ટરીમાં મૂકવી જોઈએ. અહીં એક મૂળભૂત ઉદાહરણ છે:

            {
  "name": "My Awesome PWA",
  "short_name": "Awesome PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

ચાલો આ દરેક પ્રોપર્ટીઝને વિગતવાર સમજીએ:

`name`

તમારી વેબ એપ્લિકેશનનું સંપૂર્ણ નામ. આ નામ વપરાશકર્તાઓને ત્યારે પ્રદર્શિત કરવામાં આવશે જ્યારે તેમને એપ ઇન્સ્ટોલ કરવા માટે પૂછવામાં આવશે અને એપ લોન્ચરમાં.

ઉદાહરણ:

            "name": "Global News App"
            

              
                Copy
              
            
          

`short_name`

તમારી એપના નામનું ટૂંકું સંસ્કરણ, જેનો ઉપયોગ મર્યાદિત જગ્યા હોય ત્યારે થાય છે, જેમ કે હોમ સ્ક્રીન પર અથવા એપ લોન્ચરમાં. તેને સંક્ષિપ્ત રાખો.

ઉદાહરણ:

            "short_name": "Global News"
            

              
                Copy
              
            
          

`start_url`

જ્યારે એપ લોન્ચ થાય ત્યારે તેને જે URL લોડ કરવું જોઈએ. તે સામાન્ય રીતે તમારી વેબ એપ્લિકેશનનું હોમપેજ હોય છે, પરંતુ તે કોઈ ચોક્કસ લેન્ડિંગ પેજ પણ હોઈ શકે છે.

ઉદાહરણ:

            "start_url": "/"
            

              
                Copy
              
            
          

તમે ક્વેરી પેરામીટર્સ સાથે URL નો ઉપયોગ પણ કરી શકો છો જેથી વપરાશકર્તાઓ તમારા PWA ને કેવી રીતે લોન્ચ કરી રહ્યા છે તે ટ્રૅક કરી શકાય:

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

જ્યારે એપ લોન્ચ થાય ત્યારે તે કેવી રીતે પ્રદર્શિત થવી જોઈએ તે વ્યાખ્યાયિત કરે છે. ઘણા વિકલ્પો છે:

• `standalone`: એપ તેની પોતાની ટોપ-લેવલ વિન્ડોમાં ખુલશે, જેમાં એડ્રેસ બાર જેવા બ્રાઉઝર UI તત્વો નહીં હોય.
• `fullscreen`: એપ આખી સ્ક્રીન પર દેખાશે, સ્ટેટસ બારને પણ છુપાવી દેશે.
• `minimal-ui`: `standalone` જેવું જ છે, પરંતુ તે બેક બટન અને રિફ્રેશ બટન જેવું ન્યૂનતમ બ્રાઉઝર UI પ્રદાન કરે છે.
• `browser`: એપ સામાન્ય બ્રાઉઝર ટેબ અથવા વિન્ડોમાં ખુલશે.

ભલામણ: PWAs માટે સામાન્ય રીતે `standalone` એ પસંદગીનો વિકલ્પ છે.

ઉદાહરણ:

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

જ્યારે એપ લોન્ચ થાય ત્યારે એપની સ્પ્લેશ સ્ક્રીનનો બેકગ્રાઉન્ડ કલર. એપ આઇકોન અને એપની સામગ્રી વચ્ચે સરળ સંક્રમણ પ્રદાન કરવા માટે આ મહત્વપૂર્ણ છે.

ઉદાહરણ:

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

એપના UI ને સ્ટાઇલ કરવા માટે વપરાતો થીમ કલર, જેમ કે એન્ડ્રોઇડ પર સ્ટેટસ બાર. આ કલર તમારી એપની બ્રાન્ડિંગ સાથે મેળ ખાતો હોવો જોઈએ.

ઉદાહરણ:

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

ઑબ્જેક્ટ્સનો એક એરે, દરેક એપ માટે એક આઇકોનનું પ્રતિનિધિત્વ કરે છે. તમારે વિવિધ કદના બહુવિધ આઇકોન્સ પ્રદાન કરવા જોઈએ જેથી એપ જુદા જુદા ઉપકરણો અને રિઝોલ્યુશન પર સારી દેખાય.

દરેક આઇકોન માટે પ્રોપર્ટીઝ:

• `src`: આઇકોન ઇમેજનો URL.
• `sizes`: પિક્સેલ્સમાં આઇકોનના પરિમાણો (દા.ત., "192x192").
• `type`: આઇકોન ઇમેજનો MIME પ્રકાર (દા.ત., "image/png").

ભલામણ કરેલ આઇકોન સાઇઝ:

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

ઉદાહરણ:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

વધારાની મેનિફેસ્ટ પ્રોપર્ટીઝ

જ્યારે ઉપરોક્ત પ્રોપર્ટીઝ સૌથી સામાન્ય છે, વેબ એપ મેનિફેસ્ટ તમારા PWA ને કન્ફિગર કરવા માટે અન્ય ઘણા વિકલ્પોને સપોર્ટ કરે છે:

`id`

તમારા PWA માટે એક અનન્ય ઓળખકર્તા. જો તમારી પાસે સમાન નામવાળા બહુવિધ PWAs હોય તો સંઘર્ષોને રોકવા માટે આ મહત્વપૂર્ણ છે.

ઉદાહરણ:

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

એપના નેવિગેશન સ્કોપને વ્યાખ્યાયિત કરે છે. આ નક્કી કરે છે કે તમારી વેબસાઇટની અંદર કયા URLs ને PWA નો ભાગ ગણવામાં આવે છે. જો વપરાશકર્તા સ્કોપની બહાર નેવિગેટ કરે છે, તો એપ સામાન્ય બ્રાઉઝર ટેબમાં ખુલશે.

ઉદાહરણ:

            "scope": "/app/"
            

              
                Copy
              
            
          

આ ઉદાહરણમાં, ફક્ત `/app/` થી શરૂ થતા URLs ને PWA નો ભાગ ગણવામાં આવશે.

`orientation`

એપ માટે પસંદગીની સ્ક્રીન ઓરિએન્ટેશન સ્પષ્ટ કરે છે. વિકલ્પોમાં `portrait`, `landscape`, `any`, અને વધુનો સમાવેશ થાય છે.

ઉદાહરણ:

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

ઑબ્જેક્ટ્સનો એક એરે જે સંબંધિત નેટિવ એપ્લિકેશન્સને વ્યાખ્યાયિત કરે છે. આ તમને તમારા PWA ને પહેલાથી ઇન્સ્ટોલ કરેલા વપરાશકર્તાઓને તમારી નેટિવ એપ્સનો પ્રચાર કરવાની મંજૂરી આપે છે.

ઉદાહરણ:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

આ ઉદાહરણ સૂચવે છે કે Google Play Store પર `com.example.myapp` ID સાથે સંબંધિત નેટિવ એપ છે.

`prefer_related_applications`

એક બુલિયન મૂલ્ય જે સૂચવે છે કે શું વપરાશકર્તાને PWA ને બદલે સંબંધિત નેટિવ એપ્લિકેશન ઇન્સ્ટોલ કરવા માટે પ્રોમ્પ્ટ કરવો જોઈએ.

ઉદાહરણ:

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

સ્ટ્રિંગ્સનો એક એરે જે એપની કેટેગરીઝનું પ્રતિનિધિત્વ કરે છે. આ વપરાશકર્તાઓને તમારી એપને એપ સ્ટોર્સ અથવા શોધ પરિણામોમાં શોધવામાં મદદ કરી શકે છે.

ઉદાહરણ:

            "categories": ["news", "information"]
            

              
                Copy
              
            
          

`shortcuts`

શોર્ટકટ્સની સૂચિ વ્યાખ્યાયિત કરે છે જેને વપરાશકર્તાઓ તેમની હોમ સ્ક્રીન પર એપ આઇકોનથી ઍક્સેસ કરી શકે છે. આ વપરાશકર્તાઓને એપની અંદર સામાન્ય કાર્યો ઝડપથી કરવા દે છે.

ઉદાહરણ:

            "shortcuts": [
  {
    "name": "Latest News",
    "short_name": "News",
    "description": "Read the latest news articles",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

તમારી વેબ એપ સાથે મેનિફેસ્ટને લિંક કરવું

એકવાર તમે તમારી `manifest.json` ફાઇલ બનાવી લો, પછી તમારે તેને તમારી વેબ એપ્લિકેશન સાથે લિંક કરવાની જરૂર છે, તમારા HTML ના `` વિભાગમાં `` ટેગ ઉમેરીને:

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

તમારા મેનિફેસ્ટને માન્ય કરવું

તમારી `manifest.json` ફાઇલને માન્ય કરવી મહત્વપૂર્ણ છે જેથી તે યોગ્ય રીતે ફોર્મેટ થયેલ છે અને તેમાં બધી આવશ્યક પ્રોપર્ટીઝ છે તેની ખાતરી કરી શકાય. તમે તમારા મેનિફેસ્ટને માન્ય કરવા માટે JSONLint જેવા ઑનલાઇન સાધનો અથવા Chrome DevTools નો ઉપયોગ કરી શકો છો.

તમારા PWA નું પરીક્ષણ કરવું

તમારો મેનિફેસ્ટ બનાવી અને લિંક કર્યા પછી, તમારે તમારા PWA નું વિવિધ બ્રાઉઝર્સ અને ઉપકરણોમાં પરીક્ષણ કરવું જોઈએ જેથી તે અપેક્ષા મુજબ કામ કરે તેની ખાતરી કરી શકાય. તમારા મેનિફેસ્ટનું નિરીક્ષણ કરવા અને કોઈપણ સમસ્યાઓનું નિદાન કરવા માટે Chrome DevTools (Application -> Manifest) નો ઉપયોગ કરો.

વેબ એપ મેનિફેસ્ટ કન્ફિગરેશન માટે શ્રેષ્ઠ પદ્ધતિઓ

તમારા વેબ એપ મેનિફેસ્ટને કન્ફિગર કરતી વખતે ધ્યાનમાં રાખવા માટે અહીં કેટલીક શ્રેષ્ઠ પદ્ધતિઓ છે:

• બધી આવશ્યક પ્રોપર્ટીઝ પ્રદાન કરો: ખાતરી કરો કે તમે `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color`, અને `icons` જેવી બધી આવશ્યક પ્રોપર્ટીઝ શામેલ કરી છે.
• યોગ્ય આઇકોન સાઇઝનો ઉપયોગ કરો: વિવિધ ઉપકરણો અને રિઝોલ્યુશનને સપોર્ટ કરવા માટે વિવિધ કદના બહુવિધ આઇકોન્સ પ્રદાન કરો.
• યોગ્ય ડિસ્પ્લે મોડ પસંદ કરો: `display` મોડ પસંદ કરો જે તમારી એપના વપરાશકર્તા અનુભવને શ્રેષ્ઠ રીતે અનુકૂળ હોય. સામાન્ય રીતે `standalone` એ પસંદગીનો વિકલ્પ છે.
• તમારા મેનિફેસ્ટને માન્ય કરો: તમારી `manifest.json` ફાઇલને હંમેશા માન્ય કરો જેથી તે યોગ્ય રીતે ફોર્મેટ થયેલ છે તેની ખાતરી કરી શકાય.
• તમારા PWA નું પરીક્ષણ કરો: તમારા PWA નું વિવિધ બ્રાઉઝર્સ અને ઉપકરણોમાં પરીક્ષણ કરો જેથી તે અપેક્ષા મુજબ કામ કરે તેની ખાતરી કરી શકાય.
• SEO માટે ઑપ્ટિમાઇઝ કરો: તમારી એપની શોધક્ષમતા સુધારવા માટે તમારા `name`, `short_name`, અને `description` માં સંબંધિત કીવર્ડ્સનો ઉપયોગ કરો.
• સ્થાનિકીકરણનો વિચાર કરો: જો તમારી એપ વૈશ્વિક પ્રેક્ષકોને લક્ષ્ય બનાવે છે, તો વિવિધ ભાષાઓ માટે વિવિધ નામો, વર્ણનો અને આઇકોન્સ સાથે તમારા મેનિફેસ્ટના સ્થાનિકીકૃત સંસ્કરણો પ્રદાન કરવાનું વિચારો.

સુવ્યવસ્થિત રીતે કન્ફિગર કરેલ વેબ એપ મેનિફેસ્ટના ઉદાહરણો

અહીં લોકપ્રિય PWAs માંથી સુવ્યવસ્થિત રીતે કન્ફિગર કરેલ વેબ એપ મેનિફેસ્ટના કેટલાક ઉદાહરણો છે:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite is a faster, data-friendly way to see what's happening in the world.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Order your favorite Starbucks drinks and food with the app.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Order Now",
      "short_name": "Order",
      "description": "Start a new order",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

વેબ એપ મેનિફેસ્ટનું ભવિષ્ય

વેબ એપ મેનિફેસ્ટ એ એક વિકસતું ધોરણ છે, જેમાં સમયાંતરે નવી સુવિધાઓ અને ક્ષમતાઓ ઉમેરવામાં આવી રહી છે. ખાતરી કરો કે તમારા PWAs નવીનતમ તકનીકોનો સંપૂર્ણ લાભ લઈ રહ્યા છે તે માટે W3C ના નવીનતમ અપડેટ્સ અને ભલામણો પર નજર રાખો.

નિષ્કર્ષ

વેબ એપ મેનિફેસ્ટ એ કોઈપણ PWA નો આવશ્યક ઘટક છે. તમારા મેનિફેસ્ટને યોગ્ય રીતે કન્ફિગર કરીને, તમે એક સરળ અને આકર્ષક વપરાશકર્તા અનુભવ પ્રદાન કરી શકો છો, જે તમારી વેબ એપને નેટિવ એપ્લિકેશન જેવી અનુભૂતિ કરાવે છે. આ માર્ગદર્શિકાએ વેબ એપ મેનિફેસ્ટનું વ્યાપક વિહંગાવલોકન પૂરું પાડ્યું છે, જેમાં તેની પ્રોપર્ટીઝ, શ્રેષ્ઠ પદ્ધતિઓ અને ઉદાહરણોનો સમાવેશ થાય છે. આ માર્ગદર્શિકાઓનું પાલન કરીને, તમે તમારા PWAs ની સંપૂર્ણ ક્ષમતાને અનલૉક કરી શકો છો અને વિશ્વભરના તમારા વપરાશકર્તાઓને શ્રેષ્ઠ વપરાશકર્તા અનુભવ પહોંચાડી શકો છો.

વેબ એપ મેનિફેસ્ટની શક્તિને અપનાવો અને તમારી વેબસાઇટ્સને ઇન્સ્ટોલ કરી શકાય તેવા, એપ જેવા અનુભવોમાં રૂપાંતરિત કરો જે વપરાશકર્તાઓને આનંદિત કરે છે અને સગાઈને વેગ આપે છે.